import { connect } from 'dva';
import React, { PureComponent } from 'react';

import UpdateModelC from '@/src/routes/systemManagement/qualificationManagementPlanMaintenance/updateModelC';

import AnalysisReport from './analysisReport';
import BasicsInfo from './basicsInfo';
import CardBorderBox from './CardBorderBox';
import myStyle from './index.less';
import Positionquery from './positionQuery';
import ValuationAnalysis from './valuationAnalysis';

import ResultSearch from '../../systemManagement/valuationAnalysis/resultSearch';
import dataConfig from '../dataConfig';

@connect(({ loading, workStationM }) => ({
  loading,
  workStationM,
}))
export default class NonstandardStation extends PureComponent {
  state = {
    showOnly: undefined, // 展示一行还是两行
    pageState: '1', // pageState:1-主页面 2-基础信息编辑、新增、详情页 3-估值解析结果查询页 4- 5- 6-
    pageType: undefined, // 资产管理计划'view'-查看 'edit'-编辑
    productId: undefined, // 证券id
    operateType: undefined, // 基本信息-弹窗参数
    id: undefined, // 基本信息-弹窗参数
    infoDetail: undefined, // 估值解析结果查询信息
    trandingCode: undefined,
    trandingName: undefined,
    dimension: '2', // 解析维度
    reportArgs: undefined, // 传递给分析报告的参数
  };

  componentDidMount() {
    // 监听浏览器窗口变化 得到屏幕大小
    window.addEventListener('resize', this.windowChange);
    this.windowChange();
  }

  // 窗口变化 确定显示一行单个 还是一行两个
  windowChange = () => {
    const width = document.body?.clientWidth;
    this.setState({
      showOnly: width < dataConfig.dividingSize,
    });
  };

  componentWillUnmount() {
    // 删除窗口大小的监听
    window.removeEventListener('resize', this.windowChange);
  }

  /**
   * 修改主框架状态
   * @param pageState 状态
   * @param params 组件的参数
   */
  onChangePage = (pageState, params) => {
    // 此时是基本信息的弹窗 '2'
    if (pageState === '2') {
      this.setState({
        pageState,
        id: params?.id,
        operateType: params?.operateType,
      });
      return;
    }
    this.setState({
      pageState,
    });
  };

  // 基本信息卡片-设置返回到主框架
  onBack = (type) => {
    this.setState(
      {
        id: '',
        pageState: '1',
      },
      () => {
        if (type === 'ok') {
          this.BaseInfo.getAssetInfo();
        }
      },
    );
  };

  /**
   * 基本信息卡片-响应证券代码点击
   * @param code 证券代码
   * @param name 证券简称
   * @param dimension 解析维度
   */
  codeOnChange = (code, name, dimension) => {
    this.setState({
      trandingCode: code,
      trandingName: name,
      dimension,
    });
  };

  // 切换估值解析结果查询页面
  changeResultPage = (refresh = false, type, infoDetail) => {
    if (refresh) {
      this.valuationAnalysisRef.onRefresh();
    }
    this.setState(
      {
        infoDetail,
      },
      () => {
        this.onChangePage(type);
      },
    );
  };

  /**
   * 刷新估值解析列表
   * @param code 证券代码
   */
  assetsOnChange = (code) => {
    const { trandingCode } = this.state;
    if (trandingCode == undefined) {
      this.valuationAnalysisRef.onRefresh();
    } else if (trandingCode == code) {
      this.setState(
        {
          trandingCode: undefined,
          trandingName: undefined,
        },
        () => {
          this.valuationAnalysisRef.onRefresh();
        },
      );
    }
  };

  // 响应持仓查询的查询点击 参数包含：产品名称和查询日期
  onSearchClick = (info) => {
    console.log(info);
    this.setState({
      reportArgs: {
        date: info.date?.format('YYYY-MM-DD'),
        productIds: info.productIds,
        timeStamp: new Date().getTime(), // 每次持仓点击查询 就更新
      },
    });
  };

  render() {
    const { reportArgs, operateType, id, showOnly, pageState, infoDetail, trandingCode, trandingName, dimension } = this.state;

    return (
      <div style={{ height: '100vh' }}>
        <div
          style={{ display: pageState == 1 ? 'inherit' : 'none' }}
          className={showOnly ? `${myStyle.penetrateStation} ${myStyle.showOnly}` : `${myStyle.penetrateStation}  ${myStyle.showMore}`}
        >
          <div>
            <div
              style={{
                height: showOnly ? 'auto' : '570px',
                order: showOnly ? 3 : 'inherit',
                minWidth: showOnly ? dataConfig.compMinWidth : 'auto',
                background: '#fff',
                borderRadius: '10px',
              }}
            >
              <BasicsInfo
                onFreshAssetsChange={this.assetsOnChange}
                onHandleTradingCode={this.codeOnChange}
                onChangePage={this.onChangePage}
                onRef={(ref) => {
                  this.BaseInfo = ref;
                }}
              />
            </div>
            <div style={{ height: showOnly ? 'auto' : '570px', order: showOnly ? 3 : 'inherit', minWidth: showOnly ? dataConfig.compMinWidth : 'auto' }}>
              <ValuationAnalysis
                onRef={(ref) => (this.valuationAnalysisRef = ref)}
                showResultPage={this.changeResultPage}
                trandingCode={trandingCode}
                trandingName={trandingName}
                dimension={dimension}
              />
            </div>
            <div
              style={{
                height: showOnly ? 'auto' : '800px',
                order: showOnly ? 3 : 'inherit',
                minWidth: showOnly ? dataConfig.compMinWidth : 'auto',
                background: '#fff',
                borderRadius: '10px',
              }}
            >
              <Positionquery onSearchClick={this.onSearchClick} showOnly={showOnly} />
            </div>
            <div style={{ height: showOnly ? 'auto' : '800px', order: showOnly ? 3 : 'inherit', minWidth: showOnly ? dataConfig.compMinWidth : 'auto' }}>
              <AnalysisReport reportArgs={reportArgs} />
            </div>
          </div>
        </div>
        {pageState > 1 && (
          <div className={myStyle.penetrateStation}>
            {pageState == '2' && (
              <div id='basicInfoModalDom'>
                {/* 基本信息区的弹窗-新增编辑详情 */}
                <CardBorderBox title={operateType === 1 ? '新增' : operateType === 2 ? '编辑' : operateType === 3 ? '详情' : ''} backToMinus={this.onBack}>
                  <UpdateModelC onBack={this.onBack} id={id} operateType={operateType} isReportPermissionBefore={false} />
                </CardBorderBox>
              </div>
            )}
            {pageState == '3' && (
              <CardBorderBox title='结果查询' backToMinus={() => this.onChangePage('1')}>
                <ResultSearch infoDetail={infoDetail} changeResultPage={this.changeResultPage} />
              </CardBorderBox>
            )}
          </div>
        )}
      </div>
    );
  }
}
